<style type="text/css">
	img, .user-name, .user-time{
		cursor: pointer;  
		transition: all 0.6s;  
	}
	img:hover{  
		transform: scale(10);  
	} 
	.modal-body{height:479px;overflow-y: scroll;}
	#table-user {  
		table-layout: fixed;  
		width: 98% border:0px;  
		margin: 0px;  
	}  
	#table-user tr td {  
		text-overflow: ellipsis; /* for IE */  
		-moz-text-overflow: ellipsis; /* for Firefox,mozilla */  
		overflow: hidden;  
		white-space: nowrap;  
		text-align: left  
	}  
</style>
<table class="table table-bordered table-hover" id="table-user">
    <div class="dataTables_filter">
        <button type="button" class="btn btn-info btn-sm btn-search">查询:</button>
        <input type="search" placeholder="请输入关键字" name="keywords" class="form-control input-sm input-search" value="">
    </div>
    <thead>
        <tr>
            <th>用户id</th>
            <th>头像</th>
            <th>姓名</th>
            <th>房卡</th>
            <th>余额</th>
            <th>注册时间</th>
        </tr>
    </thead>
    <tbody class="body-user"> 
        @foreach($users as $user)
            <tr>
                <td>{{$user->userid}}</td>
                <td><img src="{{$user->headimg}}" style="width:20px"></td>
                <td class="user-name">{{base64_decode($user->name)}}</td>
                <td>{{$user->gems}}</td>
                <td>{{$user->money}}</td>
                <td class="user-time">{{$user->created_at}}</td>
            </tr>
        @endforeach
    </tbody>
</table>
<div align="center">
	<a class="refresh" href="javascript:void(0)"><i class="fa fa-fw fa-refresh"></i>加载更多</a>
</div>

<!-- layer -->
<script src="{{asset('/js/layer/layer.js')}}"></script>
<script type="text/javascript">
	var page = 2;//初始页码
	var search_page = 1;

    $(".refresh").click(function(){
    	var keywords = $('.input-search').val();
    	var this_page = (keywords.length > 0) ? search_page: page;
        $.ajax({
          type: "get",
          dataType: "json",
          url: '/admin/agent/dvlp_load/{{$agent->id}}',
          data: {
            page: this_page,
            pagesize: 10,
            keywords: keywords
          },
          success: function (data) {
            if (data.flag) {
            	if (data.data.length > 0) {
	            	page += 1;
	            	search_page += 1;
	            	var html = '';
	            	for (var i=0;i<data.data.length;i++) {
	            		html += '<tr>'+
					                '<td>'+data.data[i].userid+'</td>'+
					                '<td>'+'<img src="'+data.data[i].headimg+'" style="width:20px">'+'</td>'+
					                '<td class="user-name">'+data.data[i].name+'</td>'+
					                '<td>'+data.data[i].gems+'</td>'+
					                '<td>'+data.data[i].money+'</td>'+
					                '<td class="user-time">'+data.data[i].created_at+'</td>'+
					            '</tr>';
	            	}
	            	$('.body-user').append(html);
            	} else {
            		$(".refresh").html('暂无更多');	
            	}
            } else {
                $(".refresh").html('暂无更多');
            }
          }
        });
    });  

    $('.body-user').on('click', '.user-name', function(){
		layer.tips("<span style='color:#fff'>"+$(this).text()+"</span>", this, {
			tips: [2, '#0a0a0a']
		});
    });

	$('.body-user').on('click', '.user-time', function(){
		layer.tips("<span style='color:#fff'>"+$(this).text()+"</span>", this, {
			tips: [4, '#0a0a0a']
		});
    });

    $('.btn-search').click(function(){
    	var keywords = $('.input-search').val();
    	search_page = 1;
    	if (keywords) {
	    	$.ajax({
	          type: "get",
	          dataType: "json",
	          url: '/admin/agent/dvlp_load/{{$agent->id}}',
	          data: {
	            page: search_page,
	            pagesize: 10,
	            keywords: keywords
	          },
	          success: function (data) {
	            if (data.flag) {
	            	if (data.data.length > 0) {
	            		$('.body-user').html('');
		            	search_page += 1;
		            	var html = '';
		            	for (var i=0;i<data.data.length;i++) {
		            		html += '<tr>'+
						                '<td>'+data.data[i].userid+'</td>'+
						                '<td>'+'<img src="'+data.data[i].headimg+'" style="width:20px">'+'</td>'+
						                '<td class="user-name">'+data.data[i].name+'</td>'+
						                '<td>'+data.data[i].gems+'</td>'+
						                '<td>'+data.data[i].money+'</td>'+
						                '<td class="user-time">'+data.data[i].created_at+'</td>'+
						            '</tr>';
		            	}
		            	$('.body-user').append(html);
		            	$(".refresh").html('<i class="fa fa-fw fa-refresh"></i>加载更多');
	            	} else {
	            		$(".refresh").html('暂无更多');	
	            	}
	            } else {
	                $(".refresh").html('暂无更多');
	            }
	          }
	        });
    	}
    });
</script>